<template>
  <div id="ai-components">
    <div class="step-one-content">
      <div class="chart-box-radar all-box">
        <HomeChart1 />
      </div>
      <div
        v-if="data.length"
        v-loading="loading"
        element-loading-text="加载中..."
        :element-loading-spinner="svg"
        class="one-item-right all-box"
      >
        <div class="tab">
          <div
            v-for="(item, index) in data"
            :key="index"
            :class="{ active: active === index }"
            @click="changeTabList(index)"
          >
            {{ item.title }}
          </div>
          <el-button
            style="height: 29px"
            class="refresh-btn"
            color="#457aff"
            type="primary"
            @click="refreshData()"
            >刷新</el-button
          >
        </div>
        <div class="one-right-wrap">
          <div class="one-left">
            <div
              v-for="(item, index) in tabList"
              :key="index"
              :class="{
                red: item.score < 60,
                orange: item.score >= 60 && item.score < 80,
                green: item.score >= 80,
                active: subActive === index,
              }"
              @click="subActive = index"
            >
              <div class="one-left-title" :title="item.title">
                {{ item.title }}
              </div>
            </div>
          </div>
          <div class="one-right">
            <div class="one-right-title">
              <img src="@/assets/img/home/right-title.png" />
              智能评价
            </div>
            <div class="one-right-content">
              {{ content }}
            </div>
            <!-- <div class="one-right-point">
              <img src="@/assets/img/home/right-point.png" />
              点击与我对话巩固知识点
            </div> -->
          </div>
        </div>
      </div>
      <div
        v-else
        v-loading="loading"
        element-loading-text="加载中..."
        :element-loading-spinner="svg"
        class="one-item-right all-box nodata"
      >
        <div>
          <img src="@/assets/img/nodata.png" />
        </div>
        <div>暂无数据</div>
      </div>
    </div>
    <el-dialog
      v-model="isShowAI"
      :close-on-click-modal="false"
      width="80%"
      align-center
      :before-close="handleClose"
    >
      <div class="my-dialog">
        <div v-if="isShowAI" class="my-dialog-content">
          <iframe
            width="100%"
            height="100%"
            :src="url"
            frameborder="0"
          ></iframe>
          <!-- <Agent3 /> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import HomeChart1 from "@/components/HomeChart1.vue";
import Agent3 from "@/components/Agent3.vue";
import eventBus from "@/utils/eventBus";
export default {
  components: {
    HomeChart1,
    Agent3,
  },
  data() {
    return {
      courseId: "",
      classId: "",
      url: "",
      isShowAI: false,
      roles: "",
      loading: false,
      data: [],
      active: -1,
      subActive: -1,
      content: "",
      tab: ["教学难点分析", "教学改进建议"],
      tabList: [],
      svg: "loading",
    };
  },
  watch: {
    //监听active变化
    active(val) {
      if (this.data.length) {
        this.tabList = this.data[val].children;
        this.subActive = 0;
        this.content = this.tabList[this.subActive]?.content;
      }
    },
    //监听subActive变化
    subActive(val) {
      if (this.tabList.length) {
        this.content = this.tabList[val].content;
      }
    },
  },
  created() {
    this.roles = JSON.parse(localStorage.getItem("userInfo")).roles[0];
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.classId = JSON.parse(localStorage.getItem("classId"));
    this.getData();
    // this.getUrl();
    // 监听班级变更事件
    eventBus.on("classChanged", this.handleClassChanged);
  },
  beforeUnmount() {
    // 清理事件监听器
    eventBus.off("classChanged", this.handleClassChanged);
  },
  methods: {
    handleClassChanged(newClassId) {
      this.classId = newClassId;
      this.getData();
    },
    handleClose() {
      this.isShowAI = false;
    },
    changeTabList(index) {
      this.active = index;
      this.subActive = 0;
    },
    getData() {
      this.loading = true;
      let url = "";
      if (this.roles === "teacher" || this.roles === "internet_admin") {
        url = `/tes/dify/teacher/difficultyAndImprove?courseId=${this.courseId}&classId=${this.classId}`;
      } else {
        url = `/tes/dify/student/knowledgePoint?courseId=${this.courseId}`;
      }

      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          this.data = res.data;
          this.active = 0;
          this.subActive = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getUrl() {
      let url = "/dify/getAgentRoute";
      this.$axios.get(url).then((response) => {
        const res = response;
        this.url = res.data.stepAddr;
      });
    },

    // 刷新
    refreshData() {
      this.loading = true;
      let url = "";
      if (this.roles === "teacher" || this.roles === "internet_admin") {
        url = `/tes/dify/teacher/difficultyAndImprove?courseId=${this.courseId}&classId=${this.classId}&init=true`;
      } else {
        url = `/tes/dify/student/knowledgePoint?courseId=${this.courseId}&init=true`;
      }

      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          this.data = res.data;
          this.active = 0;
          this.subActive = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#ai-components {
  .step-one-content {
    display: flex;
    gap: 20px;
    .chart-box-radar {
      min-width: 530px;
      width: 530px;
      height: 300px;
      box-sizing: border-box;
      > div {
        width: 100%;
        height: 300px;
      }
    }
    .one-item-right {
      height: 300px;
      flex: 1;
      padding: 34px;
      box-sizing: border-box;
      .tab {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 40px;
        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 110px;
          height: 27px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #b2c8ff;
          font-size: 14px;
          color: #457aff;
          cursor: pointer;
          &.active,
          &:hover {
            background: #457aff;
            color: #ffffff;
          }
        }
        .refresh-btn {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .one-right-wrap {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        .one-left {
          min-width: 130px;
          height: 169px;
          overflow-y: auto;
          &::-webkit-scrollbar {
            display: none;
          }

          > div {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: bold;
            font-size: 14px;
            color: #34394d;
            margin-bottom: 8px;
            cursor: pointer;
            .one-left-title {
              max-width: 130px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-left: 10px;
              box-sizing: border-box;
            }
            &.active,
            &:hover {
              color: #457aff;
            }
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 5px;
              height: 5px;
              background: #e86a6a;
              border-radius: 50%;
            }
            &.red {
              &::before {
                background: red;
              }
            }
            &.orange {
              &::before {
                background: #e86a6a;
              }
            }
            &.green {
              &::before {
                background: green;
              }
            }
          }
        }
        .one-right {
          position: relative;
          width: 100%;
          height: 169px;
          background: #eff5fd;
          border-radius: 10px;
          padding: 13px 30px;
          box-sizing: border-box;
          .one-right-title {
            font-weight: bold;
            font-size: 14px;
            color: #1e5afa;
            display: flex;
            align-items: center;
          }
          .one-right-content {
            font-size: 14px;
            color: #154a8e;
            line-height: 23px;
            @media (max-width: 1600px) {
              font-size: 10px;
            }
          }
          .one-right-point {
            display: flex;
            align-items: center;
            gap: 10px;
            position: absolute;
            top: -20px;
            right: 40px;
            font-size: 16px;
            color: #457aff;
          }
        }
      }
    }
  }
  :deep(.el-dialog) {
    background: none;
    box-shadow: none;
    .my-dialog {
      padding: 10px 0;
    }
    .my-dialog-content {
      height: 80vh;
      iframe {
        height: 100%;
      }
    }
    .el-dialog__close {
      color: #333;
      background: #aaabad;
      border-radius: 50%;
      padding: 2px;
    }
  }
  :deep(.el-loading-mask) {
    background: #fff;
  }
  .nodata {
    > div {
      line-height: 1;
      font-size: 16px;
      color: #707ea1;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
  }
  //媒体查询
  @media (max-width: 1300px) {
    .step-one-content {
      flex-wrap: wrap;
      .chart-box-radar {
        width: 100%;
      }
    }
  }
}
</style>